.editor-diff-viewer {
	box-sizing: border-box;
	overflow-y: hidden;
	flex: 1;
	margin: 0;
	position: relative;
	z-index: 1; // Put the viewer above the action-buttons:before overlay gradient. -shaun

	.editor-diff-viewer__scrollable {
		padding: 24px 32px 32px;
		height: 100%;
		overflow-y: auto;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
	}

	.editor-diff-viewer__title {
		font-family: $serif;
		font-size: 32px;
		color: var( --color-neutral-70 );
		font-weight: 600;
		margin: 0 0 24px;
		height: auto;
		line-height: 1.425;
	}

	@include breakpoint( '>1040px' ) {
		&.is-split {
			.editor-diff-viewer__scrollable {
				display: flex;
			}
			.editor-diff-viewer__main-pane {
				width: 50%;
				padding-right: 16px;
				.text-diff__additions {
					display: none;
				}
			}
			.editor-diff-viewer__secondary-pane {
				display: block;
				width: 50%;
				padding-left: 16px;
				.text-diff__deletions {
					display: none;
				}
			}
		}
	}
}

.editor-diff-viewer__secondary-pane {
	display: none;
}

.editor-diff-viewer__hint-above,
.editor-diff-viewer__hint-below {
	position: absolute;
	right: 24px;
	border-radius: 4px;
	height: 28px;
	line-height: 27px;
	background-color: var( --color-text-subtle );
	cursor: pointer;
	padding: 0 16px 0 8px;
	color: #fff;
	font-size: 13px;

	@include breakpoint( '<660px' ) {
		display: none;
	}
}

.editor-diff-viewer__hint-above {
	top: 0;
	border-radius: 0 0 4px 4px;
}

.editor-diff-viewer__hint-below {
	bottom: 0;
	border-radius: 4px 4px 0 0;
}

.editor-diff-viewer__hint-icon {
	margin-right: 6px;
	position: relative;
	top: 4px;
}

.editor-diff-viewer.is-loading .editor-diff-viewer__title {
	display: inline-block;
	width: 50%;
	height: 38px;
	@include placeholder( --color-neutral-10 );
}

.editor-diff-viewer__content {
	font-family: $serif;
	font-size: 15px;
	white-space: pre-wrap;
	word-wrap: break-word;
	padding: 0;
	background: transparent;
	overflow: hidden;
}

.editor-diff-viewer.is-loading .editor-diff-viewer__content {
	&::before,
	&::after {
		content: '';
		display: block;
		width: 100%;
		height: 20px;
		margin-top: 6px;
		@include placeholder( --color-neutral-10 );
	}

	&::before {
		width: 75%;
	}

	&::after {
		margin-bottom: 36px;
		box-shadow: 0 26px 0 0 var( --color-neutral-5 );
	}
}
